<!--20210304    zaq    创建vue文件-->
<!--20210512    zaq    重命名，设计账簿-组别界面-->
<!--20210521    zaq    修改界面，完善增删改方法-->

<template>

<div style="padding: 5px;height: 80%">
  <!--    新建分株-->
  <el-dialog
      title="新增分组"
      v-model="createGroupVisible"
      width="30%"
      :before-close="handleClose">
      <insert-group></insert-group>
  </el-dialog>

  <el-button style="width: 100%" @click="create"><i class="el-icon-plus"></i> 新建分组</el-button>

  <div style="height: 100%">
    <el-scrollbar style="overflow-x: hidden">
      <ul  style="padding: 0;margin: 0;text-align: left;">
        <li v-for="group in groups" class="infinite-list-item"
            style="width:100%;list-style: none;
        background-color: #c0ccda;
        border: 1px solid #3A4052;height: 4em">
          <div style="text-align: left;padding: 1em">
            <span>{{ group.name }}</span>
          </div>
          <div style="text-align: right;width: 85%;padding: 2px;margin: 2px">
          <span @click="update(group)">
            <i class="el-icon-edit"></i> 修改名称
          </span>&#12288;

            <span :underline="false" @click="selectList(group)">
            <i class="el-icon-view"></i> 详情
          </span>&#12288;

            <span @click="deleteGroup(group)">
            <i class="el-icon-delete"></i> 删除
          </span>


            <el-drawer
                :title="group.name+'  分组明细'"
                v-model="group.select"
                direction="rtl"
                :before-close="handleClose" destroy-on-close
                size="50%"
            >
              <!--显示明细-->
              <list style="width: 100%">

              </list>
            </el-drawer>
          </div>
        </li>
      </ul>
    </el-scrollbar>

  </div>




</div>


</template>

<script>
import {getGroup_0000} from "../../api";
import {delete_13301} from "../../api";
import {update_13201} from "../../api";
import Insert_group from "./Insert-group"
import List from "./List"

export default {
  name: "Group_list",
  props:{
  },
  components:{
    'insert-group':Insert_group,
    'list':List
  },
  data(){
    return{
      count:10,
      //组别
      groups:[
        {
          count:0,
          code:-1,
          note:"",
          gId:-1,
          name:"",
          BId:-1,
          kGId:-1,
          uId:-1,
          delete:0,
          update:false,
          select:false,
        }
      ],
      createGroupVisible:false
    }
  },
  created() {
    console.log("bId:"+sessionStorage.getItem("bId"))
    console.log("uId:"+sessionStorage.getItem("uId"))
    this.select()
  },
  methods:{
    //查看明细
    selectList(group){
      sessionStorage.setItem("gId",group.gId)
      group.select=true
    },
    //修改名称
    update(body){
      this.$prompt('请输入修改后名称', '修改分组名称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        //检查格式
        if (!value||value.trim()=="") {
          this.$message({
            type: 'error',
            message: '名称不能为空'
          });
        }else if(value.length>10){
          this.$message({
            type: 'error',
            message: '名称长度不能超过10个字符'
          });
        }else {
          body.name=value.trim()

          update_13201(body).then(resp=>{
            if(resp.code>0){
              this.$message({
                type: 'success',
                message: '修改成功'
              });
            }else {
              this.$message({
                type: 'error',
                message: resp.note
              });
            }
          }).catch(error=>{
            this.$message({
              type: 'error',
              message: '调用接口13201失败'+error
            });
          })

        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    //删除
    deleteGroup(body){
      const _this=this
      this.$confirm('此操作将永久删除分组, 是否继续?', '删除分组', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delete_13301(body).then(resp=>{
          if(resp.code>0){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            _this.select()
          }else {
            this.$message({
              type: 'error',
              message: '删除失败：'+resp.note
            });
          }
        }).catch(error=>{
          this.$message({
            type: 'error',
            message: '调用接口13301失败：'+error
          });
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    load(){

    },
    create(){
      this.createGroupVisible=true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {

          });
    },
    select(){
      const _this=this
      var bKind=sessionStorage.getItem("bId")
      var uId=sessionStorage.getItem("uId")
      var body={
        count:0,
        code:-1,
        note:"",
        gId:-1,
        name:"",
        bId:bKind,
        kGId:-1,
        uId:uId,
        delete:0,
        update:false,
        select:false,
      }
      console.log(body)
      getGroup_0000(body).then(resp=>{
          _this.groups=resp
      }).catch(error=>{
        console.log("调用接口失败:"+error)
      })
    }
  }
}
</script>

<style scoped>

</style>